<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>AI Poetry - 让 AI 为你开启诗意灵感之旅</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
  <script src="https://cdn.tailwindcss.com"></script>
  <link rel="stylesheet" href="./index.css">
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#6366f1',
            secondary: '#818cf8'
          },
          borderRadius: {
            'none': '0px',
            'sm': '2px',
            DEFAULT: '4px',
            'md': '8px',
            'lg': '12px',
            'xl': '16px',
            '2xl': '20px',
            '3xl': '24px',
            'full': '9999px',
            'button': '4px'
          }
        }
      }
    }
  </script>
  <style>
    body {
      min-height: 1024px;
      background-image: url('https://ai-public.mastergo.com/ai/img_res/3210d5adec22ee95e3ff67821f0631e0.jpg');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      background-attachment: fixed;
    }

    .card {
      background: white;
      border-radius: 12px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
      padding: 24px;
      margin-bottom: 24px;
    }

    .cardy1 {
      background: white;
      border-radius: 12px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
      padding: 24px;
      margin-bottom: 24px;
    }

    .cardy2 {
      background: white;
      border-radius: 12px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
      padding: 24px;
      margin-bottom: 24px;
    }

    .cardy3 {
      background: white;
      border-radius: 12px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
      padding: 24px;
      margin-bottom: 24px;
    }

    .tab-active {
      color: #6366f1;
      border-bottom: 2px solid #6366f1;
    }

    .poetry-card {
      transition: all 0.3s ease;
    }

    .poetry-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    }

    select#xz {
      /* 字体样式 */
      font-family: Arial, sans-serif;
      /* 去除聚焦时边框 */
      outline: none;
      font-size: 16px;
      /* 文本颜色 */
      color: rgba(0, 0, 0, 0.7);
      /* 背景颜色 */
      background-color: #fff;
      /* 内边距，调整文本与边框的距离 */
      padding: 8px 12px;
      /* 鼠标悬停时的样式 */
      cursor: pointer;
      margin-left: 140px;
    }

    /* 选中选项的样式 */
    select#xz option:checked {
      background-color: #f0f0f0;
    }

    .tab-content {
      display: none;
    }

    .tab-content.active {
      display: block;
    }
  </style>
</head>

<body>
  <span class="alert"></span>
  <div class="w-[1440px] mx-auto px-8 py-12">
    <a href="../index/index.html" class="text-primary hover:text-gray-200 transition-colors">
      < 返回首页</a>
        <div
          style="background-image: url('https://ai-public.mastergo.com/ai/img_res/653d1652cec2fae41665d33ceee96dbf.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat;"
          class="divv w-full h-[600px] flex items-center justify-center mb-12">
          <div class="max-w-[1200px] w-full mx-auto px-8 py-6">
            <div class="text-center mb-12">
              <h1 class="text-6xl font-['Pacifico'] text-primary mb-4">AI Poetry Assistant</h1>
              <p class="text-gray-100 text-primary">点击开始ai创作之旅</p>
            </div>
          </div>
        </div>
        <div class="flex gap-8 h-full">

          <!-- 左侧创作区域 -->
          <div class="w-1/2 flex flex-col">

            <h2 class="text-xl font-medium mb-6">创作灵感</h2>
            <div class="card1">
              <textarea id="prompt1" class="w-full h-40 p-4 rounded-lg border-none input-focus bg-white/50"
                placeholder="描述你想要创作的诗歌主题、风格或情感..." style="outline: none;"></textarea>
              <button
                class="mt-4 w-full bg-primary text-white py-3 px-6 rounded-button flex items-center justify-center gap-2">
                <i class="fas fa-pen-nib"></i>
                生成诗歌灵感
              </button>
            </div>
            <div class="card mt-8 flex-1">
              <h3 class="text-lg font-medium mb-4">提交作品</h3>
              <input id="prompt"
                class="w-200 h-10 p-4 rounded-lg input-focus border-none bg-white/50 border border-black"
                placeholder="在这里输入作品名称..." style="outline: none"></input>
              <select name="xuanze" id="xz" style="width: 200px;" p>
              </select>
              <hr>
              <textarea id="prompt2" class="w-full h-40 p-4 rounded-lg border-none input-focus bg-white/50"
                placeholder="在这里提交您的诗歌作品..." style="outline: none;"></textarea>
              <button id="khtj" class="mt-4 w-full bg-primary text-white py-3 px-6 rounded-button">
                提交你的作品
              </button>
            </div>
          </div>
          <!-- 右侧创作指导区域 -->
          <div class="w-3/5 opacity-0 transition-opacity duration-500" id="result">
            <h2 class="text-xl font-medium mb-6">创作方向</h2>
            <div class="cardy1 mb-6">
              <!-- <h3 class="text-lg text-primary font-medium mb-4">量子纠缠之恋</h3>
          <div class="space-y-3">
            <p><span class="font-medium">意象：</span>双星系统、概率云、超距感应</p>
            <p><span class="font-medium">修辞：</span>拟物化 + 悖论</p>
            <p><span class="font-medium">情感：</span>宿命感的律动</p>
          </div> -->
            </div>
            <div class="cardy2 mb-6">
              <!-- <h3 class="text-lg text-primary font-medium mb-4">咖啡馆的永恒瞬间</h3>
          <div class="space-y-3">
            <p><span class="font-medium">意象：</span>冷萃咖啡的漫溢、糖粒沉降、杯缘唇印</p>
            <p><span class="font-medium">修辞：</span>通感 + 时间膨胀</p>
            <p><span class="font-medium">情感：</span>悬停的瞬味</p>
          </div> -->
            </div>
            <div class="cardy3 mb-6 flex-1">
              <!-- <div class="mb-8">
            <h3 class="text-lg font-medium mb-4">引导问题</h3>
            <div class="space-y-4">
              <div class="flex items-start gap-4">
                <div class="w-6 h-6 bg-primary text-white rounded-full flex items-center justify-center flex-shrink-0">1
                </div>
                <p class="text-gray-700">希望表现爱情的时间尺度是瞬间还是永恒？</p>
              </div>
              <div class="flex items-start gap-4">
                <div class="w-6 h-6 bg-primary text-white rounded-full flex items-center justify-center flex-shrink-0">2
                </div>
                <p class="text-gray-700">更倾向具象场景还是抽象概念？</p>
              </div>
            </div>
          </div>
          <div>
            <h3 class="text-lg font-medium mb-4">风格建议</h3>
            <div class="flex gap-4">
              <span class="px-4 py-2 bg-secondary text-primary rounded-full text-sm">塞缪明克十四行诗</span>
              <span class="px-4 py-2 bg-secondary text-primary rounded-full text-sm">新古典主义自由体</span>
            </div>
          </div> -->
            </div>
          </div>
        </div>
        <div class="flex space-x-8 border-b border-gray-200 mb-6">
          <button class="tab-btn px-4 py-2 tab-active" data-tab="sx">思乡</button>
          <button class="tab-btn px-4 py-2 text-gray-500 hover:text-primary" data-tab="ss">山水</button>
          <button class="tab-btn px-4 py-2 text-gray-500 hover:text-primary" data-tab="aq">爱情</button>
          <button class="tab-btn px-4 py-2 text-gray-500 hover:text-primary" data-tab="yq">友情</button>
          <button class="tab-btn px-4 py-2 text-gray-500 hover:text-primary" data-tab="lz">励志</button>
          <button class="tab-btn px-4 py-2 text-gray-500 hover:text-primary" data-tab="lb">离别</button>
          <button class="tab-btn px-4 py-2 text-gray-500 hover:text-primary" data-tab="ag">爱国</button>
        </div>
        <div class="tab-content active" id="sx">
          <h2 class="text-2xl font-bold mb-6">作品展示</h2>
          <div class="grid active grid-cols-2 gap-6">
          </div>
        </div>

        <div class="tab-content" id="ss">
          <h2 class="text-2xl font-bold mb-6">作品展示</h2>
          <div class="grid active grid-cols-2 gap-6">
          </div>
        </div>

        <div class="tab-content" id="aq">
          <h2 class="text-2xl font-bold mb-6">作品展示</h2>
          <div class="grid active grid-cols-2 gap-6">
          </div>
        </div>

        <div class="tab-content" id="yq">
          <h2 class="text-2xl font-bold mb-6">作品展示</h2>
          <div class="grid active grid-cols-2 gap-6">
          </div>
        </div>

        <div class="tab-content" id="lz">
          <h2 class="text-2xl font-bold mb-6">作品展示</h2>
          <div class="grid active grid-cols-2 gap-6">
          </div>
        </div>

        <div class="tab-content" id="lb">
          <h2 class="text-2xl font-bold mb-6">作品展示</h2>
          <div class="grid active grid-cols-2 gap-6">
          </div>
        </div>

        <div class="tab-content" id="ag">
          <h2 class="text-2xl font-bold mb-6">作品展示</h2>
          <div class="grid active grid-cols-2 gap-6">
          </div>
        </div>
  </div>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script src="../../utils/auth.js"></script>
  <script src="../../utils/alert.js"></script>
  <script src="./index.js"></script>
</body>

</html>